<template>
    <div class="flex justify-center items-center">
        <Form ref="formRef" :formList="formList" :formData="formData" :rules="rules"></Form>
        <el-button type="primary" @click="Login">登录</el-button>
    </div>
</template>
<script>
export default defineComponent({
    name: 'Login',
});
</script>
<script setup>
import Form from "@/components/Form/Form.vue"
import { checkEmpty } from "@/utils/check"

const router = useRouter()

const formRef = ref()
// 表单配置项
const formList = [
    {
        label: "账号",
        type: "input",
        key: "user_name",
    },
    {
        label: "密码",
        type: "input",
        input_type: 'password',
        key: "password",
    },
]
// 表单数据
const formData = ref({
    user_name: "",
    password: "",
})
// 表单校验
const rules = {
    user_name: [
        { required: true, validator: checkEmpty('请输入账号'), trigger: 'blur' },
    ],
    password: [
        { required: true, validator: checkEmpty('请输入密码'), trigger: 'blur' },
    ],
}
// 提交表单
const Login = async () => {
    let d = await formRef.value.checkForm()
    if (d) {
        console.log(formData.value)
        router.push('/table')
    }
}

</script>
<style lang='scss' scoped>
</style>
